<template>
  <!-- 催办工单列表 -->
  <a-modal :visible="true" :footer="null" :width="1300" @cancel="cancelModel" class="orderModal">
    <div :style="topStyle">
      <div class="infoModal">工单列表</div>
      <div class="table-page-search-wrapper">
        <a-form layout="inline" class="formModel" style="padding:20px 20px 0 20px">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="类型">
                <div v-if="queryParam.type == 1">快开</div>
                <div v-if="queryParam.type == 2">查勘</div>
                <div v-if="queryParam.type == 3">快建</div>
                <div v-if="queryParam.type == 4">合同</div>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="区县">
                <a-select v-model="queryParam.country" placeholder="请选择">
                  <a-select-option value="省级">省级</a-select-option>
                  <a-select-option value="市级">市级</a-select-option>
                  <a-select-option value="">福州</a-select-option>
                  <a-select-option value="市工建">市工建</a-select-option>
                  <a-select-option value="鼓楼">鼓楼</a-select-option>
                  <a-select-option value="福清">福清</a-select-option>
                  <a-select-option value="长乐">长乐</a-select-option>
                  <a-select-option value="闽侯">闽侯</a-select-option>
                  <a-select-option value="罗源">罗源</a-select-option>
                  <a-select-option value="闽清">闽清</a-select-option>
                  <a-select-option value="连江">连江</a-select-option>
                  <a-select-option value="平潭">平潭</a-select-option>
                  <a-select-option value="永泰">永泰</a-select-option>
                  <a-select-option value="马尾">马尾</a-select-option>
                  <a-select-option value="台江">台江</a-select-option>
                  <a-select-option value="晋安">晋安</a-select-option>
                  <a-select-option value="仓山">仓山</a-select-option>
                  <a-select-option value="市级维护">市级维护</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>

            <a-col :md="6" :sm="24">
              <a-form-item label="客经">
                <a-input v-model="queryParam.kj" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="CRM号">
                <a-input v-model="queryParam.crmNo" placeholder="请输入编号" />
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="工单环节">
                <a-input v-model="queryParam.link" placeholder="" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="系统">
                <a-select v-model="queryParam.sys" placeholder="请选择" @change="sysChange">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="综资">综资</a-select-option>
                  <a-select-option value="施调">施调</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="是否办结">
                <a-select v-model="queryParam.endIs" placeholder="请选择" @change="bjChange">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="已办结">已办结</a-select-option>
                  <a-select-option value="未办结">未办结</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="当前操作类型">
                <a-select v-model="queryParam.operationType" placeholder="请选择" @change="operationChange">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="催办">催办</a-select-option>
                  <a-select-option value="回复">回复</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-item label="是否超时">
                <a-select v-model="queryParam.overtimeIs" placeholder="请选择" @change="timeChange">
                  <a-select-option value="">全部</a-select-option>
                  <a-select-option value="是">是</a-select-option>
                  <a-select-option value="否">否</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="派单时间">
                <a-range-picker
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  @change="onChange"
                  class="rangePicker"
                />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="导入时间">
                <a-range-picker
                  v-model="selectTime"
                  :ranges="{ Today: [moment(), moment()], 'This Month': [moment(), moment().endOf('month')] }"
                  @change="dronChange"
                  class="rangePicker"
                />
              </a-form-item>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-button type="primary" @click="selectEvent">查询</a-button>
            </a-col>
            <a-col :md="2" :sm="24">
              <a-button @click="download" type="primary" icon="export">excel导出</a-button>
            </a-col>
          </a-row>
        </a-form>
      </div>

      <a-table
        style="margin:0px 20px 20px 20px;color:black"
        :pagination="pagination"
        size="small"
        rowKey="id"
        :columns="columns"
        :dataSource="userData"
        :loading="tableLoading"
        @change="pageShow"
      >
        <template slot="action" slot-scope="text, record">
          <a @click="detailsShowEvent(record)">详情</a>
        </template>
        <template slot="type" slot-scope="text, record">
          <span v-if="text == 1">快开</span>
          <span v-if="text == 2">查勘</span>
          <span v-if="text == 3">快建</span>
          <span v-if="text == 4">合同签订</span>
        </template>
        <template slot="manager" slot-scope="text, record">
          <span>({{ record.country }}){{ record.manager }}</span>
        </template>
      </a-table>

      <div style="height:20px"></div>
      <!-- //详情 -->
      <DetailsModel v-if="detailsShow" @cancelEvent="cancelEvent" v-bind:infoListData="infoListData"></DetailsModel>
    </div>
  </a-modal>
</template>

<script>
import moment from 'moment'
import DetailsModel from '@/views/UrgeManage/detailsModel'
import { getUrgeData, exportExcelUrgeDetailList } from '@/api/public'
export default {
  components: { DetailsModel },
  props: ['form', 'startTime', 'endTime'],
  data() {
    return {
      topStyle: { background: 'white' },
      infoListData: [],
      selectTime: '',
      detailsShow: false,
      queryParam: {},
      tableLoading: false,
      userData: [],
      columns,
      pagination: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      current: 1,
      pageSize: 10
    }
  },
  created() {
    this.clearAllForm()
    this.queryParam = JSON.parse(JSON.stringify(this.form))
    this.queryParam.startTime = this.startTime
    this.queryParam.endTime = this.endTime
    this.queryParam.current = this.current
    this.queryParam.pageSize = this.pageSize
    this.selectTime = [moment(this.startTime), moment(this.endTime)]
    this.getUrgeDataInfo()
    var that = this
    document.onkeydown = function(e) {
      let e1 = e || event || window.event || arguments.callee.caller.arguments[0]
      if (e1 && e1.keyCode == 13) {
        that.selectEvent()
      }
    }
  },
  mounted() {},
  methods: {
    //取消弹窗
    cancelModel() {
      this.clearAllForm()
      this.$emit('cancelEvent')
    },
    //文档导出
    download() {
      this.queryParam.deleteFlag = 1
      exportExcelUrgeDetailList(this.queryParam)
        .then(response => {
          let blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' })
          let url = window.URL.createObjectURL(blob)
          let aLink = document.createElement('a')
          aLink.style.display = 'none'
          aLink.href = url
          aLink.setAttribute('download', '催办详情列表.xlsx')
          document.body.appendChild(aLink)
          aLink.click()
          document.body.removeChild(aLink)
          window.URL.revokeObjectURL(url)
          this.$message.success(`文件已导出`)
        })
        .catch(error => {})
    },
    //查询
    selectEvent() {
      this.queryParam.current = 1
      this.getUrgeDataInfo()
    },
    moment,
    //获取催办表格数据
    getUrgeDataInfo() {
      this.tableLoading = true
      getUrgeData(this.queryParam)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //分页
    pageShow(pagination) {
      this.tableLoading = true
      this.queryParam.current = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      getUrgeData(this.queryParam)
        .then(response => {
          const pagination = { ...this.pagination }
          pagination.total = response.data.total
          pagination.pageSize = this.pageSize
          this.pagination = pagination
          this.pagination.current = response.data.current
          this.userData = response.data.records
          this.tableLoading = false
        })
        .catch(error => {
          this.tableLoading = false
        })
    },
    //派单时间
    onChange(date, dateString) {
      if (dateString[0].length == 0) {
        delete this.queryParam.sendStartTime
        delete this.queryParam.sendEndTime
      } else {
        this.queryParam.sendStartTime = dateString[0] + ' 00:00:00'
        this.queryParam.sendEndTime = dateString[1] + ' 23:59:59'
      }
    },
    //导入时间
    dronChange(date, dateString) {
      if (dateString[0].length == 0) {
        delete this.queryParam.startTime
        delete this.queryParam.endTime
      } else {
        this.queryParam.startTime = dateString[0] + ' 00:00:00'
        this.queryParam.endTime = dateString[1] + ' 23:59:59'
      }
    },
    //类型改变
    typeChange(e) {
      e.length == 0 ? delete this.queryParam.type : ''
    },
    //系统改变
    sysChange(e) {
      e.length == 0 ? delete this.queryParam.sys : ''
    },
    //办结改变
    bjChange(e) {
      e.length == 0 ? delete this.queryParam.endIs : ''
    },
    //超时改变
    timeChange(e) {
      e.length == 0 ? delete this.queryParam.overtimeIs : ''
    },
    //操作类型改变
    operationChange(e) {
      e.length == 0 ? delete this.queryParam.operationType : ''
    },
    //详情关闭
    detailsShowEvent(info) {
      this.infoListData = info
      this.detailsShow = true
    },
    //表单清空
    clearAllForm() {
      for (var key in this.queryParam) {
        delete this.queryParam[key]
      }
    },
    //取消详情弹窗
    cancelEvent() {
      this.detailsShow = false
    },
    resetSearchForm() {
      this.queryParam = {
        date: moment(new Date())
      }
    },
    sing() {
      console.log('我是子组件的方法');
    },
  }
}
//表格表头
const columns = [
  {
    title: '区县',
    dataIndex: 'country',
    align: 'center'
  },
  {
    title: '客户经理',
    dataIndex: 'manager',
    align: 'center',
    scopedSlots: { customRender: 'manager' }
  },
  {
    title: 'CRM号',
    dataIndex: 'crmNo',
    align: 'center'
  },
  {
    title: '派单时间',
    dataIndex: 'time',
    align: 'center'
  },
  {
    title: '工单环节',
    dataIndex: 'link',
    align: 'center'
  },
  {
    title: '工单历时',
    dataIndex: 'longTime',
    align: 'center'
  },
  {
    title: '整体历时',
    dataIndex: 'allLongTime',
    align: 'center'
  },
  {
    title: '是否超时',
    dataIndex: 'overTimeIs',
    align: 'center'
  },
  {
    title: '是否办结',
    dataIndex: 'endIs',
    align: 'center'
  },

  {
    title: '当前操作类型',
    dataIndex: 'operationType',
    align: 'center'
  },

  {
    title: '操作',
    dataIndex: 'action',
    align: 'center',
    scopedSlots: { customRender: 'action' }
  }
]
</script>
<style scoped>
.infoModal {
  height: 51px;
  background: #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
  border-radius: 6px 6px 0px 0px;
  text-align: center;
  line-height: 51px;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: rgba(0, 0, 0, 1);
}
</style>
